import type { RouteRecordRaw } from 'vue-router';
// const Login = () => import('@/views/login/index.vue')


/**
 * 路由meta对象参数说明
 * meta: {
 *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
 *      hidden：        是否隐藏此路由
 *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
 * }
 */

/**
 * 静态路由（默认路由）
 */
export const staticRoutes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    // component:Login,
    component:() => import('@/views/login/index.vue'),
    meta: {
      hidden: true
    }
  },

  {
    path: '/404',
    name: '404',
    component:() => import('@/views/error/404.vue') ,
    meta: {
      hidden: true
    }
  },

  {
    path: '/',
    component: () => import('@/layout/index.vue'),
    redirect: '/home',
    children: [{
      path: 'home',
      name: 'Home',
      component: () => import('@/views/home/index.vue'),
      meta: {
        title: '首页',
        icon: 'ele-HomeFilled',
      }
    }]
  },
  {
    path: '/product',
    component: () => import('@/layout/index.vue'),
    redirect: '/product/trademark/list',
    meta: {
      title: '商品管理',
      icon: 'ele-ShoppingBag',
    },
    children: [
      {
        path: '/product/category/list',
        name: 'Category',
        component: () => import('@/views/product/category/index.vue'),
        meta: {
          title: '分类管理'
        }
      },
      {
        path: '/product/trademark/list',
        name: 'Trademark',
        component: () => import('@/views/product/trademark/index.vue'),
        meta: {
          title: '品牌管理'
        }
      },
      {
        path: '/product/attr/list',
        name: 'Attr',
        component: () => import('@/views/product/attr/index.vue'),
        meta: {
          title: '平台属性管理'
        }
      },
      {
        path: '/product/spu/list',
        name: 'Spu',
        component: () => import('@/views/product/spu/index.vue'),
        meta: {
          title: 'SPU管理'
        }
      },
      {
        path: '/product/sku/list',
        name: 'Sku',
        component: () => import('@/views/product/sku/index.vue'),
        meta: {
          title: 'SKU管理'
        }
      },
      //TableTest组件是使用自定义Table组件渲染的
      {
        path: '/product/TableTest/list',
        name: 'TableTest',
        component: () => import('@/views/product/TableTest/index.vue'),
        meta: {
          title: '表格组件'
        }
      },
      {
        path: '/product/FormTest/list',
        name: 'FormTest',
        component: () => import('@/views/product/FormTest/index.vue'),
        meta: {
          title: '表单组件'
        }
      },
    ]
  },

  /* 匹配任意的路由 必须最后注册 */
  {
    path: '/:pathMatch(.*)',
    name: 'Any',
    component:()=>import('@/views/error/404.vue'),
    meta: {
      hidden: true
    }
  }
];


/**
 * 定义动态路由或异步路由
 */
export const allAsyncRoutes: Array<RouteRecordRaw> = [];

/**
 * 在后台管理项目当中，为了实现权限功能，路由又分成了三类/种
 * 1. 默认路由或静态路由  无论什么账户都会看到对应的路由组件
 * 2. 动态路由或异步路由  根据用户的账户来区分不同的权限  进而呈现不同的路由模块
 * 3. 任意路由  如果出错了会跳转到这个路由项
 */
